import 'package:flutter/material.dart';

class TabBarPage extends StatelessWidget {
  const TabBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // tab 数量
      initialIndex: 0, // 初始选中的 tab 索引
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar 全属性示例'),
          bottom: const TabBar(
            // 标签列表
            tabs: [
              Tab(icon: Icon(Icons.home), text: '首页'),
              Tab(icon: Icon(Icons.message), text: '消息'),
              Tab(icon: Icon(Icons.settings), text: '设置'),
            ],

            // 控件外观属性
            isScrollable: false, // 是否可滚动
            indicatorColor: Colors.white, // 指示器颜色
            indicatorWeight: 4.0, // 指示器高度
            indicatorSize: TabBarIndicatorSize.label, // 指示器宽度类型（label/tab）
            indicatorPadding: EdgeInsets.symmetric(horizontal: 8), // 指示器边距
            indicator: UnderlineTabIndicator(
              borderSide: BorderSide(width: 4.0, color: Colors.yellow),
              insets: EdgeInsets.symmetric(horizontal: 16.0),
            ), // 可自定义指示器

            labelColor: Colors.yellow, // 选中标签文字颜色
            labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), // 选中文字样式

            unselectedLabelColor: Colors.white70, // 未选中标签文字颜色
            unselectedLabelStyle: TextStyle(fontSize: 14), // 未选中文字样式

            padding: EdgeInsets.symmetric(horizontal: 4), // tab 内容整体 padding
            labelPadding: EdgeInsets.symmetric(horizontal: 12), // 每个 tab 内部内容 padding

            splashBorderRadius: BorderRadius.all(Radius.circular(10)), // 点击水波圆角
            overlayColor: MaterialStatePropertyAll(Colors.white24), // 点击时覆盖颜色
            mouseCursor: SystemMouseCursors.click, // 鼠标悬停时的指针形状（Web/Desktop）
            dividerColor: Colors.transparent, // 分割线颜色（Flutter 3.10+）
          ),
        ),
        body: const TabBarView(
          children: [
            Center(child: Text('首页内容')),
            Center(child: Text('消息内容')),
            Center(child: Text('设置内容')),
          ],
        ),
      ),
    );
  }
}
